@section('title')
	推荐律团 @parent
@show
@section('content')      
        <!-- Top Navbar-->
        <div class="navbar theme-white">
          <div class="navbar-inner">
			<div class="left"><a href="{{ route('group.create') }}" class="external link icon-only"> <i class="icon icon-plus"></i></a></div>
            <div class="center sliding">圈子</div>
			<div class="right"></div>					
          </div>
        </div>
        <div class="pages navbar-through toolbar-through">
          <div data-page="groupmain-main" class="page pb60">
				<form class="searchbar searchbar-init">
					<div class="searchbar-input">
					<input type="search" placeholder="律团名称" class="kewword" value="{{ Input::get('keyword')  }}"><a class="searchbar-clear" href="#"></a>
					</div><a class="searchbar-cancel" href="#" style="display: block; margin-right: 0px;">取消</a>
				</form>
				<div class="searchbar-overlay"></div>
				<div class="page-content infinite-scroll">
					<div class="content-block">
							<p class="buttons-row row">
							<a href="#" class="col-50 button active">推荐团</a>
							<a href="{{ route('group.main') }}" class="external col-50 button">粉丝团</a>
							<a href="{{ route('group.mine') }}" class="external col-50 button">我的团</a>
							</p>            
							<div class="list-block media-list stories-list list-block-search searchbar-found">
								@if($datas)
								<ul class="group_ul">
									@foreach($datas AS $data)
									<li>
										<a class="external item-link group" href="{{ route('group.index', $data->id) }}" title="{{ $data->group_name }}">
											@if ($data->group_avatar )
											<img src="{{ asset( $data->group_avatar) }}" class="group_avatar">
											@else
											<img src="{{ asset('/img/group_avatar.jpg') }}"  class="group_avatar">
											@endif
											<div class="group-info">
												<div class="pull-left list-group-name">{{ $data->group_name }}</div>
												<div class="pull-right">{{ $data->fans_cnt + $data->lawyers_cnt }}人</div>
											</div>
										</a>
									</li>
									@endforeach
								</ul>
								@endif
							</div>
					</div>
					@if($page < $total_page)
						<div class="infinite-scroll-preloader">
							<div class="preloader"></div>
						</div>
					</div>
					@endif  
				</div>
          </div>
        </div>
@include('widgets.toolbar', array('active'=>'sns'))
@stop
@section('bodyEnd')
<script>
var wWidth = ($$('.page-content').width()-40)/2;
var wHeight = Math.round(wWidth*(220/300));
$$('.list-block .group_ul li a').css({width: wWidth+'px', height: wHeight+28+'px'});
$$('.group_avatar').valignImg(wWidth, wHeight);

$$(document).on('keyup', '.kewword', function(){
		keyword = $$(this).val();
		page = 1;
		if($$(this).val())
		{
			$$('.searchbar').addClass('searchbar-not-empty');
		}

		loading = true;
		ajax();
});
$$(document).on('click', '.searchbar-clear', function(){
			$$('.searchbar').removeClass('searchbar-not-empty');
})

var loading = false;
var keyword = '';
var page = {{ $page }};
var total_page =  {{ $total_page }};
 
// 注册'infinite'事件处理函数
$$('.infinite-scroll').on('infinite', function () {
  if (loading) return;
  loading = true;
    if (page >= total_page) {
      // 加载完毕，则注销无限加载事件，以防不必要的加载
      myApp.detachInfiniteScroll($$('.infinite-scroll'));
      // 删除加载提示符
      $$('.infinite-scroll-preloader').remove();
      return;
    }

		page++;
		ajax();
}); 

var ajax = function (){
			$$.ajax({
					type: "get",
					dataType: "json",
					url: "{{ route('group.recommend') }}",
					data: "page=" + page +"&keyword="+keyword,
					success: function(response){
						var _html = '';
						if(response && response.length>0)
						{
								for(i=0;i<response.length;i++)
								{
									  n = response[i];
										_html+='<li>';
										_html+='<a class="external item-link group" href="{{ Config::get("app.url") }}/group/'+n.group_id+'" title="'+n.group_name+'">';
										if(n.group_avatar)
										{
											 _html+='<img src="/'+n.group_avatar+'" class="group_avatar">';
										} else {
											 _html+='<img src="/img/group_avatar.jpg" class="group_avatar">';
										}
										_html+='<div class="group-info">';
										_html+='<div class="pull-left list-group-name">'+n.group_name+'</div>';
										_html+='<div class="pull-right">'+n.member_cnt+'人</div>';										
										_html+='</div>';
										_html+='</a>';
										_html+='</li>';
								}
						}
						if(page==1)
						{
							$$('.list-block ul').html(_html);
						} else {
							$$('.list-block ul').append(_html);
						}
						$$('.list-block .group_ul li a').css({width: wWidth+'px', height: wHeight+28+'px'});
						$$('.group_avatar').valignImg(wWidth, wHeight);

						$$('.infinite-scroll-preloader').remove();
					}
		});
}

</script>
@show